<template>
    <div class="doctor-table">

        <!-- 数据表格 -->
        <el-table :data="tableData" style="width: 100%">
            <!-- 复选框列 -->
            <el-table-column type="selection" width="55" />

            <!-- 编号列 -->
            <el-table-column prop="_id" label="编号" width="120" />

            <!-- 头像列 -->
            <el-table-column label="头像" width="64">
                <template #default="scope">
                    <el-avatar :size="40" :src="scope.row.avatar" />
                </template>
            </el-table-column>

            <!-- 姓名列 -->
            <el-table-column prop="name" label="姓名" width="90" />
            <!-- 联系电话列 -->
            <el-table-column prop="phone" label="联系电话" width="120" />

            <!-- 角色列 -->
            <el-table-column prop="roleId.name" label="角色" width="100" />

            <!-- 所属团队列 -->
            <el-table-column prop="teamIds[0].name" label="所属团队" width="100" />

            <!-- 所属机构列 -->
            <el-table-column prop="organizationId.name" label="所属机构" width="200" show-overflow-tooltip />

            <!-- 状态列 -->
            <el-table-column label="状态" width="80">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" class="ml-2" inline-prompt
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="启用"
                        inactive-text="禁用" />
                </template>
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column label="操作" width="250">
                <template #default="scope">
                    <el-button type="primary" link @click="handleViewDetail(scope.row)">查看详情</el-button>
                    <el-button type="primary" link>发消息</el-button>
                    <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]" :total="total" background
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteDoctorsApi, searchDoctorsApi } from '@/api/doctors'

// 接收父组件的搜索参数
const props = defineProps<{
    searchParams?: any
}>()

// 定义事件
const emit = defineEmits(['view-detail', 'edit'])



// 表格数据
const tableData = ref([

])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 生命周期
onMounted(() => {
    searchDoctors()
})

// 监听搜索参数变化
watch(() => props.searchParams, (newParams) => {
    if (newParams) {
        searchDoctors()
    }
}, { deep: true })

function searchDoctors() {
    // 合并搜索参数
    const params = {
        ...props.searchParams,
        page: currentPage.value,
        pageSize: pageSize.value
    }

    searchDoctorsApi(params)
        .then(res => {
            if (res.data.code == 200) {
                tableData.value = res.data.data.rows;
                total.value = res.data.data.total || 0;
            }

        })
        .catch(error => {
            console.error('搜索失败:', error)
        })
}

// 查看详情
const handleViewDetail = (row: any) => {
    emit('view-detail', row)
}

// 编辑医生
const handleEdit = (row: any) => {
    emit('edit', row)
}

// 暴露方法给父组件
defineExpose({
    searchDoctors
})


// 删除
async function handleDelete(row: any) {
    try {
        await ElMessageBox.confirm(
            '医生信息删除后无法恢复，确定要删除吗？',
            '删除确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        const res: any = await deleteDoctorsApi({ _id: row._id })
        if (res.data.code == 200) {
            ElMessage.success('删除成功')
            searchDoctors()
        } else {
            ElMessage.error(res.data.message)
        }
    } catch (error) {
        // 用户点击取消或关闭对话框
        ElMessage.info('已取消删除')
    }
}

</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>